<section>
  <h3>拖拽实体元素跟随</h3>
  <div class="row">
    <div class="col-sm-3">
      <div class="card">
        <div class="card-header">可拖拽项</div>
        <div class="card-block">
          <ul class="list-group">
            <li dDraggable [enableDragFollow]="true" [dragOverClass]="'box-shadow'" *ngFor="let item of list1"
              [dragScope]="'default-css'" [dragData]="item" class="list-group-item">
              {{item.name}}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="card card-outline-primary mb-3" dDroppable [dropScope]="'default-css'" (dropEvent)="onDrop($event)">
        <div class="card-header">放置排序区</div>
        <div class="card-block">
          <ul class="list-group d-drop-el" dSortable>
            <li dDraggable [enableDragFollow]="true" [dragOverClass]="'box-shadow'" *ngFor="let item of list2"
              [dragScope]="'default-css'" [dragHandleClass]="'drag-handle'" [dragData]="item" class="list-group-item">
              <div>
                {{item.name}}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>
